/**
* @class app.views.Viewport
* @extends Ext.Panel
*/
app.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    dockedItems: [{
        xtype: 'tabbar',
        dock: 'bottom',
        ui: 'light',
        layout: {
            pack: 'center'
        },
        items: [
        {
            iconCls: 'check2',
            cls: 'x-tab-active',
            id: 'voteTab',
            text: 'Vote',
            handler: function () {
                Ext.dispatch({
                    controller: app.controllers.navigation,
                    action: 'voteShow'
                });
            }
        },
        {
            iconCls: 'favorites',
            text: 'Rankings',
            id: 'rankingTab',
            handler: function () {
                Ext.dispatch({
                    controller: app.controllers.navigation,
                    action: 'toRankings'
                });
            }
        },
        {
            iconCls: 'user',
            text: 'Profile',
            id: 'userTab',
            handler: function () {
                Ext.dispatch({
                    controller: app.controllers.navigation,
                    action: 'profileListShow'
                });
            }
        },

        ]
        // You can define your docked items here
    }],
    /**
    * Called when the view is first created
    */
    initComponent: function () {
        /**
        * You can also create the panel's items here.
        * Just make sure you update this.items and this.dockedItems accordingly
        **/

        // This section puts instances of cards into app.views namespace
        Ext.apply(app.views, {
            // The first view is the default view
            rankings: new app.views.Rankings(),
            profile: new app.views.Profile(),
            vote: new app.views.Vote(),
            restaurantDetail: new app.views.RestaurantDetail(),
            attendees: new app.views.Attendees()
        });
        // This section puts instances of cards into viewport (allows other
        // cards to access each other)
        Ext.apply(this, {
            items: [

                app.views.vote,
				app.views.rankings,
                app.views.profile,
                app.views.restaurantDetail,
                app.views.attendees
            ]
        });
        // Calls superclass (required for initComponent functions)
        app.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});